<template>
  <div>
    <!-- 搜索条 -->
    <serch-bar></serch-bar>
    <!-- 菜单 -->
    <div class="content">
      <div class="left">
        <div @click="changeHandle(item.cat_id)" :key="item.cat_id" v-for="item in listData" :class="['neum',currteIndex==item.cat_id?'active':'']">
         {{item.cat_name}}
        </div>
      </div>
      <div class="right" v-for="Aitem in listRightData" :key="Aitem.car_id">
         <div class="right_title">
           {{Aitem.cat_name}}
         </div>
         <div class="right_content">
           <div class="right_img" v-for="(Pitem,i) in Aitem.children" :key="i">
             <img :src="Pitem.cat_icon">
             <p>{{Pitem.cat_name}}</p>
           </div>
         </div>
      </div>
    </div>
  </div>
</template>
<script>
import request from "../../utils/request.js";
import SearchBar from "../../components/SearchBar.vue";
export default {
  data(){
   return{
     listData:[],
     currteIndex:1
   }
 },
  // 调用组件
 components:{
   "serch-bar":SearchBar
 },
 computed:{
  listRightData(){
    // 使用过滤器将childern中的数据拿出
    let rightData = this.listData.filter(item=>{
      return item.cat_id == this.currteIndex;
    })
    return rightData.length>0?rightData[0].children:[];
  }
}, 
 created(){
// 调用接口,获取初始化数据
  this.initData();
 },
methods:{
  // 左侧点击事件
  changeHandle(id){
    this.currteIndex = id;
  },
// 调用接口,获取初始化数据
  async initData(){
      let {data:{message}} = await request('categories');
      this.listData = message;
    }
  }
  
}
</script>
<style lang="less" scoped>
  @import './main.less';
</style>

